<template>
  <div class="header-search show">
    <el-autocomplete
      ref="headerSearchSelect"
      v-model.trim="search"
      class="header-search-select"
      placeholder="请输入内容"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
    />

    <i class="search-icon" @click.stop="searchWaybill" />
    <i class="search-icon search-icon2" @click.stop="searchReference" />
  </div>
</template>

<script>
import {
  searchOrderByWaybillNo,
  searchOrderByReferenceNo,
  searchLikeOrderToCustomer
} from '@/api/waybill'
import { compileStr } from '@/utils'
export default {
  name: 'HeaderSearch',
  data() {
    return {
      search: ''
    }
  },

  computed: {},
  watch: {},
  mounted() {},
  methods: {
    async querySearchAsync(queryString, cb) {
      if (!queryString) {
        return cb([])
      }
      const data = await searchLikeOrderToCustomer({ searchNo: queryString })

      if (data.datas && data.datas.length > 0) {
        let arr = []
        const arr2 = []
        if (data.datas.length > 10) {
          arr = data.datas.slice(0, 10)
        } else {
          arr = data.datas
        }
        for (const i of arr) {
          arr2.push({ value: i })
        }

        cb(arr2)
      } else {
        cb([])
      }
    },
    handleSelect(item) {
      const sw = this.search.slice(0, 3)
      if (
        sw.indexOf('ZX') > -1 ||
        sw.indexOf('AIR') > -1 ||
        sw.indexOf('FCL') > -1 ||
        sw.indexOf('LCL') > -1 ||
        sw.indexOf('TH') > -1 ||
        sw.indexOf('HWC') > -1 ||
        sw.indexOf('OT') > -1 ||
        sw.indexOf('HD') > -1
      ) {
        this.searchWaybill()
      } else {
        this.searchReference()
      }
    },
    async searchWaybill() {
      if (!this.search) {
        this.$message.error('请输入运单号')
        return
      }
      const data = await searchOrderByWaybillNo({ waybillNo: this.search })
      this.toPage(data, 0)
    },
    async searchReference() {
      if (!this.search) {
        this.$message.error('请输入参考号号')
        return
      }
      const data = await searchOrderByReferenceNo({
        referenceNo: this.search
      })
      this.toPage(data, 1)
    },

    toPage(data, t) {
      // type 1：海空运、快递；2末端；3：海外仓
      const path = {}
      console.log(data)
      if (data.datas.length === 0) {
        this.$message('未查到相关数据')
        return
      }

      if (data.datas.length === 1) {
        path.params = {
          id: compileStr(data.datas[0].id.toString())
        }
        switch (data.type) {
          case 1:
            path.name = 'WaybillDetails'
            break
          case 2:
            path.name = 'WaybillHdDetail'
            break
          default:
            path.name = 'AbroadWaybillEdit'

            path.path = '/abroadWaybill/abroadWaybillEdit'
            path.query = { id: compileStr(data.datas[0].id.toString()) }

            break
        }
      } else {
        if (t) {
          path.query = { referenceNo: this.search }
        } else {
          path.query = { waybillNo: this.search }
        }

        switch (data.type) {
          case 1:
            path.path = '/waybillManagement/waybillList'
            break
          case 2:
            path.path = '/endWaybill/endWaybillList'
            break
          default:
            path.path = '/abroadWaybill/abroadWaybillList'
            break
        }
      }
      console.log('path', path)
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-search {
  font-size: 0 !important;
  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }
  .header-search-select {
    font-size: 12px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    ::v-deep .el-input__inner {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }
  &.show {
    .header-search-select {
      width: 150px;
      margin-left: 10px;
    }
  }

  .search-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../assets/images/waybill_pic.png');
  }

  .search-icon2 {
    background-image: url('../../assets/images/reference_pic.png');
  }
}
</style>
